<template>

  <el-dialog title="活动信息" :visible.sync="showDetailActivityDialog" center width="1000px">

    <el-tabs tab-position="left" style="height: 700px;" @tab-click="handleTabClick" v-model="activate_tab_name">
      <el-tab-pane label="活动详情" name="activity_detail">
        <div>
          <el-form :model="activityInfo" ref="activity">

            <el-form-item label="所属店铺" prop="store_name">
              <span>{{ activityInfo.store_name }}</span>
            </el-form-item>

            <el-form-item label="活动创建者" prop="creator">
              <span>{{ activityInfo.creator }}</span>
            </el-form-item>

            <el-form-item label="活动轮播图" prop="name">
              <div v-for="(image,index) in activityInfo.images" :key='index'>
                <img :src="image.image" alt="">
              </div>
            </el-form-item>


            <el-form-item label="活动名称" prop="name">
              <span>{{ activityInfo.name }}</span>
            </el-form-item>

            <el-form-item label="活动开始时间" prop="start_date">
              <span>{{ activityInfo.start_date }}</span>
            </el-form-item>

            <el-form-item label="活动结束时间" prop="end_date">
              <span>{{ activityInfo.end_date }}</span>
            </el-form-item>

            <el-form-item label="名额总数（限制购买人数）" prop="allowed_total">
              <span>{{ activityInfo.allowed_total }}</span>
            </el-form-item>

            <el-form-item label="参与人数" prop="participants">
              <span>{{ activityInfo.participants }}</span>
            </el-form-item>

            <el-form-item label="是否开启剩余20%自动增加名额" prop="enable_auto_add_allowed_total">
              <span>{{ activityInfo.enable_auto_add_allowed_total }}</span>
            </el-form-item>

            <el-form-item label="虚报名额" prop="virtual_total">
              <span>{{ activityInfo.virtual_total }}</span>
            </el-form-item>

            <el-form-item label="每人允许购买数量" prop="allowed_purchase_quantity">
              <span>{{ activityInfo.allowed_purchase_quantity }}</span>
            </el-form-item>

            <el-form-item label="是否开启买课程赠送课程" prop="enable_purchase_course_then_give_course">
              <span>{{ activityInfo.enable_purchase_course_then_give_course }}</span>
            </el-form-item>

            <el-form-item label="购买课程数量" prop="purchase_course">
              <span>{{ activityInfo.purchase_course }}</span>
            </el-form-item>

            <el-form-item label="赠送课程数量" prop="give_course">
              <span>{{ activityInfo.give_course }}</span>
            </el-form-item>

            <el-form-item label="活动状态" prop="active_status">
              <span>{{ activityInfo.active_status }}</span>
            </el-form-item>

            <el-form-item label="操作状态" prop="operate_status">
              <span>{{ activityInfo.operate_status }}</span>
            </el-form-item>

            <el-form-item label="发布时间" prop="date_published">
              <span>{{ activityInfo.date_published }}</span>
            </el-form-item>

            <el-form-item label="添加时间" prop="date_added">
              <span>{{ activityInfo.date_added }}</span>
            </el-form-item>



          </el-form>
          
        </div>

      </el-tab-pane>

      <el-tab-pane label="活动员工" name="activity_employee">
        <el-table
          :data="activityEmployees"
          border
        
          >
          <el-table-column
            label="头像"
            width="180">
            <template slot-scope="scope">
              <img :src="scope.row.avatar" alt="头像">
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="date_added"
            label="加入时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="活动优惠券" name="activity_coupon">
        <el-table :data="activityCoupons" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-table
                :data="scope.row.customers"
                style="width: 100%">
                <el-table-column
                  label="用户头像"
                  width="180">
                  <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="">
                  </template>
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="用户昵称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="customer_receive_date"
                  label="领取日期">
                </el-table-column>
                <el-table-column
                  prop="used"
                  label="使用状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.used=='1'">已使用</span>
                    <span v-else>未使用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="used_date"
                  label="使用日期">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column
            label="优惠券减免金额"
            prop="deduction_amount">
          </el-table-column>

          <el-table-column
            label="开始时间"
            prop="start_date">
          </el-table-column>

          <el-table-column
            label="结束时间"
            prop="end_date">
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

  </el-dialog>
</template>

<script>

import store from '@/store'
import {detail,getActivityCoupon, getActivityEmployee} from '@/api/thk/activity'

  export default {
    name: 'activityDetail',
    data(){
      return{
        showDetailActivityDialog: false,
        activity_id:0,
        activate_tab_name:'activity_detail',
        bigImageSrc: null,
        activityInfo:{//活动详情表单
          store_id:0,
          store_name:'',
          create_customer:0,
          create_customer_name:'',
          name:'',//活动名称
          type:0,//活动类型

        },
        activityEmployees:[],
        activityCoupons:[],
      }
    },

    methods:{
      
      showDetailDialog(activity_id){

        console.log('-=-=-=-=-')
        this.showDetailActivityDialog = !this.showDetailActivityDialog
        this.activate_tab_name = 'activity_detail'
        this.activity_id = activity_id
        this.getActivityInfo()
        
      },


      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

      // 点击tab选项
      handleTabClick(tab, event) {
        
        console.log('handleTabClick',tab)
        console.log('tab.name',tab.name)
        switch(tab.name){
          case 'activity_detail':
             this.getActivityInfo()
             break;
          case 'activity_employee':
            
            this.getActivityEmployee()
            
            break;
          case 'activity_coupon':
            this.getActivityCoupon()
            break;
        }

        console.log(this.activityCoupons)
      },

      getActivityInfo(){
        
         detail(store.getters.token, {activity_id:this.activity_id}).then(res =>{
          
           console.log('detail',res)
        },error => {
          console.log(error)
        })
      },

      //获取活动优惠券
      getActivityCoupon(){

        getActivityCoupon(store.getters.token, {activity_id:this.activity_id}).then(res =>{
          
          console.log('getActivityCoupon',res)
          this.activityCoupons = res.data.list
          
        },error => {
          console.log(error)
        })
      
      },

      // 获取活动员工
      getActivityEmployee(){

        getActivityEmployee(store.getters.token, {activity_id:this.activity_id}).then(res =>{
          
          console.log('getActivityEmployee',res)
          if(res.status){
            
            this.activityEmployees = res.data.list
          }
          
        },error => {
          console.log(error)
        })
      }

    }
  }
</script>

<style scoped>


  .main{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-size: 14px;
    display: flex;
  }

  .left{
    border-right: 1px solid #bdc3c7;
  }

  .right{
    border-left: 1px solid #bdc3c7;
  }

  .left, .right{
    height: auto;
    flex: 1;
  }

  .left>div, .right>div{
    display: flex;
  }

  .left>div>span:first-child, .right>div>span:first-child{
    flex: 2;
    text-align: right;
    font-weight: 600;
    padding: 10px 0;
  }

  .right>div>span:first-child{
    flex: 1;
  }


  .left>div>span:last-child, .right>div>span:last-child{
    flex: 3;
    text-align: left;
    margin-left: 10px;
    padding: 10px 0;
  }

  img{
    height: 50px;
    width: 50px;
    margin-right: 5px;
  }

  .course {
    margin-bottom: 10px;
  }

  .course span:first-child{
    display: inline-block;
    padding-top: 4px;
  }

  .course-item{
    display: block;
    position: relative;
    top: 20px;
    left: -70px;
    margin-bottom: 3px;
  }

  .course-item>div{
    border-bottom: 1px solid #e1e1e1;
    padding: 4px 0;
  }

  .course-item>div:last-child{
    border-bottom: none;
  }

  .course-item span{
    display: inline-block;
    margin-right: 7px;
    font-weight: 500;
    color: #909399;
  }

  .course-item .course-img{
    vertical-align: top;
  }

  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }


</style>
